<template>
    <div class="playlist" >
        <h2>官方歌单</h2>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="item in PlayListData" :key="item.content_id"
                @click="selectPlayList(item)">
                    <div class="cover-num">
                        <img :src="item.cover" alt="">
                        <span>{{ (item.listen_num/10000) | numFilter(1) }}万</span>
                    </div>
                    <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>    
</template>

<script>    
import BScroll from "better-scroll";
import axios from 'axios';
    export default {
    data(){
        return{
            PlayListData:[]
        };
    },
    created(){
        // this.getPlayList();
    },
    methods:{
        getPlayList(){
            axios.get("/api/recommend/playlist/u","")
            .then(res => {
                console.log(res.data.data.list)
                this.PlayListData=res.data.data.list
                this.betterScrollHorizontal(this.PlayListData.length,109)
            })
            .catch(err => {
                console.error(err); 
            })
        },
        betterScrollHorizontal(num, itemWidth) {    //横向滑动  
            let width = num * itemWidth;
            this.$refs.content.style.width = width + "px";
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,
                startX: 0,
                scrollX: true,//横向为true 
                scrollY: false,
                });
            });
        },
        selectPlayList(item){
            const id = item.content_id
            // this.$router.push({
            //     name:'PlayListDetail',
            //     params:{id}
            // })
            this.$router.push({
                path:`/playlistdetail/${id}`
            })
        },
    },
    mounted(){
        this.getPlayList()
    },
    filters:{/**过滤器 */
        numFilter(value,num){
            return parseFloat(value).toFixed(num)
        }
    }
}

</script>
<style scoped>
.playlist{
    width: 90%;
    margin: 0 auto;
}
.playlist>h2{
    font-size: 20px;
    text-align: left;
}
/*父容器必须要设置横向的宽度，并且要设置子容器（内容容器）的超出部分隐藏*/
.wrapper {
  overflow: hidden;/**超出部分隐藏*/
  margin: 0 auto;
  width: 100%;
}
ul.content > li {
  display: inline-block;/**设置为行内元素 */
  width: 109px;/**宽度需要 */
  vertical-align: top;
  text-align: center;
}
ul.content > li img{
    width: 90%;
    border-radius: 20px;/**圆角 */
}
ul.content > li >span{
    display: block;
    width: 90%;
    margin: 0 auto;
    font-size: 12px;
}
.cover-num{
    position: relative;/**绝对定位 */
}
.cover-num>span{
    position: absolute;
    right: 10px;
    bottom: 3px;
    z-index: 100;
    background-color: #856d72;
    border-radius: 20px;
    width: 81px;
}

</style>